<template>
  <div class="h-[41px] w-[41px] mr-[5px] flex items-center justify-center rounded-[4px]">
    <div class="flex items-center justify-center h-full w-full">
      <i-icon v-if="icon === 'folder'" icon="mdi:folder" class="text-4xl text-yellow-400" />
      <i-icon
        v-else-if="icon === 'text'"
        icon="mdi:file-document-outline"
        class="text-4xl text-gray-400 shadow-md shadow-lg/40"
      />
      <i-icon v-else-if="icon === 'docx'" icon="mdi:file-word" class="text-4xl text-blue-400 shadow-md shadow-lg/40" />
      <i-icon v-else-if="icon === 'pdf'" icon="mdi:file-pdf-box" class="text-4xl text-red-400 shadow-md shadow-lg/40" />
      <i-icon
        v-else-if="icon === 'image'"
        icon="mdi:file-image"
        class="text-4xl text-green-400 shadow-md shadow-lg/40"
      />
      <i-icon v-else-if="icon === 'xls'" icon="mdi:file-excel" class="text-4xl text-green-400 shadow-md shadow-lg/40" />
      <i-icon
        v-else-if="icon === 'xlsx'"
        icon="mdi:file-excel-outline"
        class="text-4xl text-green-400 shadow-md shadow-lg/40"
      />
      <i-icon v-else icon="mdi:file-outline" class="text-4xl text-gray-400 shadow-md shadow-lg/40" />
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  icon: string;
}>();
</script>

<style lang="less" scoped></style>
